<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width:200px;
				height:200px;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="box">box</div>
		<input id="txt" value="">
		<button id="button">按钮</button>
	</body>
</html>
<script>
	
	let oBox = document.getElementById('box');
	let oTxt = document.getElementById('txt');
	let oButton = document.getElementById('button');
	// 事件对象 事件名 事件执行的函数
	// 事件对象.事件名 = 事件执行的函数 ---事件对象大点调用事件，再把一个函数体赋值给它
	// 事件执行了 = 函数执行了
	
	// oBox.onclick = function(){
	// 	console.log('点击了box');
	// }
	
	// oBox.onmouseover = function(){
	// 	console.log('鼠标移入了box');
	// }
	
	// oBox.onmouseout = function(){
	// 	console.log('鼠标移出了box');
	// }
	
	oBox.dblclick = function(){
		console.log('双击了box');
	}
	
	// oTxt.onfocus = function(){
	// 	console.log('聚焦了');
	// }
	
	// oTxt.onblur = function(){
	// 	console.log('失焦了');
	// }
	
	oButton.mousedown = function(){
		console.log('鼠标按下了box');
	}
	
	oButton.mouseup = function(){
		console.log('鼠标抬起了box');
	}
	
</script>